<template>
  <div class="ArticleDetailed">
    <!-- 文章详情 -->
    <ElRow type="flex" justify="center">
      <ElCol
        :xs="{ span: 24 }"
        :md="{ span: 15, offset: 3 }"
        style="padding: 2%; margin-top: 50px; background-color: #fff"
      >
        <h2 class="xiaoye-h2">{{ item.title }}</h2>
        <div style="display: flex" class="Detailed">
          <p><i class="time-icon"></i>xiaoye</p>
          <p><i class="user-icon"></i>{{ gettime(item.updatetime) }}</p>
          <p><i class="show-icon"></i>18k</p>
        </div>
        <p>
          <el-tag
            v-for="(iTag, ii) in item.tag"
            :key="ii"
            :type="iTag.type"
            size="mini"
            style="margin-right: 10px"
            >{{ iTag.name }}</el-tag
          >
        </p>
        <hr />
        <article
          class="markdown-body"
          v-if="item"
          v-html="item.content"
        ></article>
        <hr />
        <article-message-vue />
      </ElCol>
    </ElRow>

    <div v-if="IOS == 'pc'" class="backFloat" @click="$router.go(-1)">
      <div class="backFloatitem" style="cursor: pointer">
        <span>↩</span>
        <lottie-animation
          ref="anim"
          :animationData="
            require('@/assets/icon/7743-loading-loop-animation.json')
          "
          :loop="true"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Prism from "prismjs";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import "prismjs/themes/prism-tomorrow.css";
import { dateStr } from "@/utils/getDateDiff";
import ArticleMessageVue from "./ArticleMessage.vue";
import { scrollTo } from "@/utils/scroll-to";
// import "@/assets/css/materialdesignicons.min.css";
// import "@/assets/fonts/materialdesignicons.svg";
// import $ from "jquery";

export default {
  data() {
    return {
      item: {},
      IOS: localStorage.getItem("IOS"),
    };
  },
  components: {
    ArticleMessageVue,
  },
  activated() {
    this.item = JSON.parse(localStorage.getItem("item"));
    scrollTo(0, 200);
  },
  mounted() {
    Prism.highlightAll();
    // $("pre[class*='language-'],code[class*='language-']").addClass('line-numbers');
    // if(localStorage.getItem('is')){
    //   this.$router.go(0);
    //   localStorage.removeItem('is')
    // }
    // this.$router.go(0);
    // this.reload()
  },
  updated() {
    Prism.highlightAll();
    // $("pre[class*='language-'],code[class*='language-']").addClass('line-numbers');
  },
  methods: {
    init() {},
    gettime(time) {
      return dateStr(time);
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("~@/assets/css/github-markdown.css");
// @import url("~@/assets/css/materialdesignicons.min.css");
// @import url("~@/assets/fonts/materialdesignicons.svg");
// @import url("~@/assets/fonts/materialdesignicons.ttf");
// @import url("~@/assets/fonts/materialdesignicons.woff");
// @import url("~@/assets/fonts/materialdesignicons.woff2");
// @import url("~@/assets/fonts/materialdesignicons.eot");
.ArticleDetailed {
  position: relative;
  overflow: auto;
  /deep/article {
    overflow: auto;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}
.xiaoye-h2 {
  margin-bottom: 0;
}
.Detailed {
  display: flex;
}
.Detailed p {
  padding-right: 15px;
  color: #a5a5a5;
  font-size: 14px;
}
.backFloat {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: fixed;
  left: 128px;
  top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  .backFloatitem {
    position: relative;
    & > span {
      position: absolute;
      left: 85px;
      top: 70px;
      font-size: 40px;
    }
  }
}
.time-icon::before {
  background-image: url("../assets/icon/user.png");
}
.user-icon::before {
  background-image: url("../assets/icon/time.png");
}
.show-icon::before {
  background-image: url("../assets/icon/show.png");
}
</style>